<!DOCTYPE html>
<html>
<head><meta name="generator" content="Hexo 3.9.0">
  <meta charset="utf-8">
  

  
  <title>Hexo</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta property="og:type" content="website">
<meta property="og:title" content="Hexo">
<meta property="og:url" content="http://yoursite.com/page/5/index.html">
<meta property="og:site_name" content="Hexo">
<meta property="og:locale" content="default">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="Hexo">
  
    <link rel="alternate" href="/atom.xml" title="Hexo" type="application/atom+xml">
  
  
    <link rel="icon" href="/favicon.png">
  
  
    <link href="//fonts.googleapis.com/css?family=Source+Code+Pro" rel="stylesheet" type="text/css">
  
  <link rel="stylesheet" href="/css/style.css">
</head>
</html>
<body>
  <div id="container">
    <div id="wrap">
      <header id="header">
  <div id="banner"></div>
  <div id="header-outer" class="outer">
    <div id="header-title" class="inner">
      <h1 id="logo-wrap">
        <a href="/" id="logo">Hexo</a>
      </h1>
      
    </div>
    <div id="header-inner" class="inner">
      <nav id="main-nav">
        <a id="main-nav-toggle" class="nav-icon"></a>
        
          <a class="main-nav-link" href="/">Home</a>
        
          <a class="main-nav-link" href="/archives">Archives</a>
        
      </nav>
      <nav id="sub-nav">
        
          <a id="nav-rss-link" class="nav-icon" href="/atom.xml" title="RSS Feed"></a>
        
        <a id="nav-search-btn" class="nav-icon" title="Search"></a>
      </nav>
      <div id="search-form-wrap">
        <form action="//google.com/search" method="get" accept-charset="UTF-8" class="search-form"><input type="search" name="q" class="search-form-input" placeholder="Search"><button type="submit" class="search-form-submit">&#xF002;</button><input type="hidden" name="sitesearch" value="http://yoursite.com"></form>
      </div>
    </div>
  </div>
</header>
      <div class="outer">
        <section id="main">
  
    <article id="post-JavaScript基础知识点-JS事件" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/08/31/JavaScript基础知识点-JS事件/" class="article-date">
  <time datetime="2019-08-31T10:07:37.000Z" itemprop="datePublished">2019-08-31</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/JavaScript/">JavaScript</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/08/31/JavaScript基础知识点-JS事件/">JavaScript基础知识点--JS事件</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h1 id="JS事件"><a href="#JS事件" class="headerlink" title="JS事件"></a>JS事件</h1><h2 id="什么是事件"><a href="#什么是事件" class="headerlink" title="什么是事件"></a>什么是事件</h2><p>事件是可以被 JavaScript 侦测到的行为，通俗的讲就是当用户与 Web 页面进行某些交互时，解释器就会创建响应的 event 对象以描述事件信息</p>
<h2 id="关于事件"><a href="#关于事件" class="headerlink" title="关于事件"></a>关于事件</h2><p>常见的事件有：</p>
<ul>
<li><p>用户点击页面上的某项内容</p>
</li>
<li><p>鼠标经过特定的元素</p>
</li>
<li><p>用户按下键盘上的某个按键</p>
</li>
<li><p>用户滚动窗口或改变窗口大小</p>
</li>
<li><p>页面元素加载完成或加载失败</p>
</li>
</ul>
<p><a href="http://file.mukewang.com/class/assist/777/6616789/aob2e0gqewj/js%E4%BA%8B%E4%BB%B6%E5%88%97%E8%A1%A8%EF%BC%88%E6%95%99%E8%BE%85%EF%BC%89.pdf" target="_blank" rel="noopener">JS事件列表</a></p>
<h2 id="事件句柄"><a href="#事件句柄" class="headerlink" title="事件句柄"></a>事件句柄</h2><p>事件句柄（又称事件处理函数、事件监听函数），指用于响应某个事件而调用的函数。每一个事件均对应一个事件句柄，在程序执行时，将相应的函数或语句指定给事件句柄，则在该事件发生时，浏览器便执行指定的函数或语句</p>
<h1 id="事件定义"><a href="#事件定义" class="headerlink" title="事件定义"></a>事件定义</h1><p>为特定事件定义监听函数有三种方式：</p>
<ol>
<li><p>直接在 HTML 中定义元素的事件相关属性</p>
<p> <a href="https://youchen12138.github.io/2019/08/25/JavaScript%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E7%82%B9-DOM%E4%BA%8B%E4%BB%B6/" target="_blank" rel="noopener">具体写法及语法请参照该链接</a></p>
<p> 缺点：违反了“内容与行为相分离”的原则，应尽可能少用</p>
</li>
<li><p>DOM 0级事件</p>
<p> <a href="https://youchen12138.github.io/2019/08/25/JavaScript%E5%9F%BA%E7%A1%80%E7%9F%A5%E8%AF%86%E7%82%B9-DOM%E4%BA%8B%E4%BB%B6/" target="_blank" rel="noopener">具体写法及语法请参照该链接</a></p>
<p> 优点：松耦合</p>
<p> 缺点：元素最多绑定一个事件</p>
</li>
<li><p>DOM 2级事件</p>
<p> 高级事件处理方式，一个事件可以绑定多个监听函数</p>
 <figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">btn.addEventListener(&quot;click&quot;, function()&#123;&#125;, flase)// DOM</span><br><span class="line">btn.attachEvent(&quot;onclick&quot;, function()&#123;&#125;)// IE</span><br><span class="line">document.body.addEventListener(&quot;load&quot;, init)</span><br><span class="line">document.body.attachEvent(&quot;onload&quot;, init)</span><br><span class="line">function init()&#123;//...&#125;</span><br></pre></td></tr></table></figure>

<p> 此语法可以为一个元素绑定多个监听函数，但需要注意浏览器兼容问题</p>
<p> 优点：松耦合，绑定多个事件，事件捕获和事件冒泡</p>
</li>
</ol>
<h1 id="DOM事件流"><a href="#DOM事件流" class="headerlink" title="DOM事件流"></a>DOM事件流</h1><h2 id="添加事件"><a href="#添加事件" class="headerlink" title="添加事件"></a>添加事件</h2><h3 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>Element.addEventListener(event，function，useCapture)</p>
</blockquote>
<h3 id="功能"><a href="#功能" class="headerlink" title="功能"></a>功能</h3><p>用于向指定元素添加事件句柄</p>
<h3 id="参数说明"><a href="#参数说明" class="headerlink" title="参数说明"></a>参数说明</h3><ul>
<li><p>event：必选项。字符串，指定事件名</p>
</li>
<li><p>function：必选项。指定要事件触发时执行的函数</p>
</li>
<li><p>useCapture：可选。布尔值，指定事件是否在捕获或冒泡阶段执行。false为事件冒泡，true为事件捕获。默认false</p>
</li>
</ul>
<h2 id="移除事件"><a href="#移除事件" class="headerlink" title="移除事件"></a>移除事件</h2><h3 id="语法-1"><a href="#语法-1" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>Element.removeEventListener(event, function, useCapture)</p>
</blockquote>
<h3 id="功能-1"><a href="#功能-1" class="headerlink" title="功能"></a>功能</h3><p>移除 addEventListener() 方法添加的事件句柄</p>
<h3 id="参数说明-1"><a href="#参数说明-1" class="headerlink" title="参数说明"></a>参数说明</h3><ul>
<li><p>event：必选项。字符串，要移除的事件名称</p>
</li>
<li><p>function：必选项。指定要移除的函数</p>
</li>
<li><p>useCapture：可选。布尔值，指定移除事件句柄的阶段。alse为事件冒泡，true为事件捕获。默认false</p>
</li>
</ul>
<h3 id="注意"><a href="#注意" class="headerlink" title="注意"></a>注意</h3><p>事件解绑成功的主要原因就是：保持 addEventListener() 和 removeEventListener() 的里面的参数一致</p>
<h1 id="IE事件流（IE事件处理程序）"><a href="#IE事件流（IE事件处理程序）" class="headerlink" title="IE事件流（IE事件处理程序）"></a>IE事件流（IE事件处理程序）</h1><p>只能适用于IE8及IE8以下的浏览器，执行顺序为事件冒泡</p>
<h2 id="添加事件-1"><a href="#添加事件-1" class="headerlink" title="添加事件"></a>添加事件</h2><h3 id="语法-2"><a href="#语法-2" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>Element.attachEvent(event, function)</p>
</blockquote>
<h3 id="功能-2"><a href="#功能-2" class="headerlink" title="功能"></a>功能</h3><p>用于向指定元素添加事件句柄</p>
<h3 id="参数说明-2"><a href="#参数说明-2" class="headerlink" title="参数说明"></a>参数说明</h3><ul>
<li><p>event：必选项。字符串，指定事件名，必须加“on”前缀</p>
</li>
<li><p>function：必选项。指定要事件触发时执行的函数</p>
</li>
</ul>
<h2 id="移除事件-1"><a href="#移除事件-1" class="headerlink" title="移除事件"></a>移除事件</h2><h3 id="语法-3"><a href="#语法-3" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>Element.detachEvent(event, function)</p>
</blockquote>
<h3 id="功能-3"><a href="#功能-3" class="headerlink" title="功能"></a>功能</h3><p>移除 attachEvent() 方法添加的事件句柄</p>
<h3 id="参数说明-3"><a href="#参数说明-3" class="headerlink" title="参数说明"></a>参数说明</h3><ul>
<li><p>event：必选项。字符串，要移除的事件名称</p>
</li>
<li><p>function：必选项。指定要移除的函数</p>
</li>
</ul>
<h1 id="事件周期"><a href="#事件周期" class="headerlink" title="事件周期"></a>事件周期</h1><p>解释器创建一个 event 对象后，会按如下过程将其在 HTML 元素间进行传播</p>
<p>第一阶段：事件捕获，事件对象沿 DOM 树向下传播</p>
<p>第二阶段：目标触发，运行事件监听函数</p>
<p>第三阶段：事件冒泡，事件沿 DOM 树向上传播</p>
<p>注意：IE 的事件模型中没有“事件捕获”阶段</p>
<h2 id="事件冒泡"><a href="#事件冒泡" class="headerlink" title="事件冒泡"></a>事件冒泡</h2><p>事件冒泡：直系亲属树结构中，点击某个元素，由于冒泡作用，亲属树上的元素凡是添加了事件的，都会被触发，触发顺序为从下到上</p>
<h2 id="事件捕获"><a href="#事件捕获" class="headerlink" title="事件捕获"></a>事件捕获</h2><p>事件冒泡：直系亲属树结构中，点击某个元素，亲属树上的元素凡是添加了事件的，都会被触发，触发顺序为从上到下</p>
<h2 id="事件委托（原理是事件冒泡）"><a href="#事件委托（原理是事件冒泡）" class="headerlink" title="事件委托（原理是事件冒泡）"></a>事件委托（原理是事件冒泡）</h2><ul>
<li><p>事件委托就是利用冒泡的原理，把事件加到父级上，触发执行效果。</p>
</li>
<li><p>使用事件委托可以提高性能</p>
</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/08/31/JavaScript基础知识点-JS事件/" data-id="ck4r400qh005ll0w0aafqaf8t" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-JavaScript基础知识点-DOM属性" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/08/31/JavaScript基础知识点-DOM属性/" class="article-date">
  <time datetime="2019-08-31T01:34:26.000Z" itemprop="datePublished">2019-08-31</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/JavaScript/">JavaScript</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/08/31/JavaScript基础知识点-DOM属性/">JavaScript基础知识点--DOM属性</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h1 id="认识属性"><a href="#认识属性" class="headerlink" title="认识属性"></a>认识属性</h1><p>HTML 属性分为两种</p>
<ol>
<li><p>property：固有属性</p>
</li>
<li><p>attribute：自定义属性</p>
</li>
</ol>
<h2 id="属性说明"><a href="#属性说明" class="headerlink" title="属性说明"></a>属性说明</h2><ul>
<li><p>Ele.attributes：返回指定节点的属性集合</p>
</li>
<li><p>Ele.attributes.getNamedItem(“attributeName”).nodeValue：返回指定的属性节点。attributeName为要查找的属性值的属性名，该方法只能获取在元素上定义的属性值</p>
</li>
<li><p>Ele.attributes.removeNamedItem(“attributeName”)：移除指定的属性节点</p>
</li>
<li><p>Ele.attributes.setNamedItem(“attribute”)：将已有的属性节点设置给该元素</p>
</li>
<li><p>document.createAttribute(“arributeName”)：在文档中创建一个属性节点。若是要为指定元素添加属性，需要到 setNamedItem() 方法或 setAttributeNode() 方法</p>
</li>
<li><p>nodeName：会根据所属节点类型返回节点的名称</p>
<table>
<thead>
<tr>
<th>nodeName所属节点的类型</th>
<th>返回值</th>
</tr>
</thead>
<tbody><tr>
<td>元素节点</td>
<td>标签名称</td>
</tr>
<tr>
<td>属性节点</td>
<td>属性名称</td>
</tr>
<tr>
<td>文本节点</td>
<td>#text</td>
</tr>
<tr>
<td>文档节点(document)</td>
<td>#document</td>
</tr>
</tbody></table>
</li>
<li><p>nodeValue：会根据所属节点类型返回节点的值。nodeValue 属性对于文档节点和元素节点是不可用的</p>
<table>
<thead>
<tr>
<th>nodeValue所属节点的类型</th>
<th>返回值</th>
</tr>
</thead>
<tbody><tr>
<td>文本节点</td>
<td>文本</td>
</tr>
<tr>
<td>属性节点</td>
<td>属性值</td>
</tr>
</tbody></table>
</li>
<li><p>nodeType：返回一个数值代表节点的类型</p>
<table>
<thead>
<tr>
<th>接口</th>
<th>nodeType常量</th>
<th>nodeType值</th>
<th>备注</th>
</tr>
</thead>
<tbody><tr>
<td>Element</td>
<td>Node.ELEMENT_NODE</td>
<td>1</td>
<td>元素节点</td>
</tr>
<tr>
<td>Text</td>
<td>Node.TEXT_NODE</td>
<td>3</td>
<td>文本节点</td>
</tr>
<tr>
<td>Document</td>
<td>Node.DOCUMENT_NODE</td>
<td>9</td>
<td>document</td>
</tr>
<tr>
<td>Comment</td>
<td>Node.COMMENT_NODE</td>
<td>8</td>
<td>注释的文本</td>
</tr>
<tr>
<td>DocumentFragment</td>
<td>Node.DOCUMENT_FRAGMENT_NODE</td>
<td>11</td>
<td>文档片段</td>
</tr>
<tr>
<td>Attr</td>
<td>Node.ATTRIBUTE_NODE</td>
<td>2</td>
<td>节点属性</td>
</tr>
</tbody></table>
</li>
<li><p>Ele.getAttribute(“attributeName”)：获取该属性名的属性值。包括固有属性和自定义属性</p>
</li>
<li><p>Ele.setAttribute(attributeName, attributeValue)：添加或修改元素的属性节点的属性值</p>
</li>
<li><p>Ele.removeAttribute(attributeName)：移除该元素指定的属性名及其属性值</p>
</li>
<li><p>Ele.setAttributeNode(attribute)：将属性节点添加到指定元素内</p>
</li>
</ul>
<h1 id="nodeValue-与-value-的区别"><a href="#nodeValue-与-value-的区别" class="headerlink" title="nodeValue 与 value 的区别"></a>nodeValue 与 value 的区别</h1><p>nodeValue 属性根据节点的类型设置或返回节点的值。这里创建了一个属性节点，然后给这个节点添加了值</p>
<p>value 属性用于设置或者返回属性的值。这里是直接属性添加值</p>
<h1 id="为元素添加属性"><a href="#为元素添加属性" class="headerlink" title="为元素添加属性"></a>为元素添加属性</h1><h2 id="第一种方法"><a href="#第一种方法" class="headerlink" title="第一种方法"></a>第一种方法</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Ele.color.colorName=&quot;colorValue&quot;;</span><br></pre></td></tr></table></figure>

<h2 id="第二种方法"><a href="#第二种方法" class="headerlink" title="第二种方法"></a>第二种方法</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Ele.setArribute(&quot;arributeName&quot;, &quot;arributeValue&quot;);</span><br></pre></td></tr></table></figure>

<h2 id="第三种方法"><a href="#第三种方法" class="headerlink" title="第三种方法"></a>第三种方法</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var arr=document.createAttribute(&quot;arributeName&quot;);// 设置元素节点的属性名</span><br><span class="line">arr.value=&quot;arributeValue&quot;;// 设置元素节点的属性值</span><br><span class="line">Ele.setAttributeNode(arr);// 将元素节点添加到元素中</span><br></pre></td></tr></table></figure>

<h2 id="第四种方法"><a href="#第四种方法" class="headerlink" title="第四种方法"></a>第四种方法</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var data = document.createAttribute(&quot;data&quot;);</span><br><span class="line">data.value = &quot;wrap&quot;;</span><br><span class="line">div.attributes.setNamedItem(data);// 为元素添加指定节点</span><br></pre></td></tr></table></figure>

<h1 id="移除属性节点"><a href="#移除属性节点" class="headerlink" title="移除属性节点"></a>移除属性节点</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">Ele.attributes.removeNamedItem(&quot;attributeName&quot;);</span><br></pre></td></tr></table></figure>

<h1 id="其他属性"><a href="#其他属性" class="headerlink" title="其他属性"></a>其他属性</h1><h2 id="HTML-标签的布尔属性"><a href="#HTML-标签的布尔属性" class="headerlink" title="HTML 标签的布尔属性"></a>HTML 标签的布尔属性</h2><p>如 disabled、multiple、readonly、checked、selected 等属性</p>
<h2 id="字符串属性"><a href="#字符串属性" class="headerlink" title="字符串属性"></a>字符串属性</h2><p>如 id、title（鼠标滑过时的提示信息）、href、src、lang、dir（文本的输出方向）、accesskey（通过快捷键使某个元素快捷选中，快捷键为Alt+定义的键）、name、value、class 等属性</p>
<h3 id="W3C全局属性"><a href="#W3C全局属性" class="headerlink" title="W3C全局属性"></a>W3C全局属性</h3><p>accesskey、class、contenteditable（是否可编辑的内容）、dir、hidden、id、lang、spellcheck、style、tabindex（规定当使用“tab”键进行导航时元素的顺序）、title、translate（规定是否应该翻译元素内容，目前所有主流浏览器都无法正确支持该属性）</p>
<h1 id="classList"><a href="#classList" class="headerlink" title="classList"></a>classList</h1><ul>
<li><p>add(classValue)：为元素添加class类名</p>
</li>
<li><p>remove(classValue)：为元素移除class类名</p>
</li>
<li><p>contain(classValue)：判断该元素是否存在某个class</p>
</li>
<li><p>toggle(classValue)：如果有该classValue，则删除。若没有，则添加上</p>
</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/08/31/JavaScript基础知识点-DOM属性/" data-id="ck4r400qd005dl0w0tpr43dby" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-JavaScript基础知识点-DOM操作之节点" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/08/26/JavaScript基础知识点-DOM操作之节点/" class="article-date">
  <time datetime="2019-08-26T12:55:06.000Z" itemprop="datePublished">2019-08-26</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/JavaScript/">JavaScript</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/08/26/JavaScript基础知识点-DOM操作之节点/">JavaScript基础知识点--DOM操作之节点</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h1 id="DOM之节点"><a href="#DOM之节点" class="headerlink" title="DOM之节点"></a>DOM之节点</h1><ul>
<li><p>添加节点</p>
</li>
<li><p>删除节点</p>
</li>
<li><p>修改节点</p>
</li>
<li><p>查找节点</p>
</li>
</ul>
<h1 id="添加节点"><a href="#添加节点" class="headerlink" title="添加节点"></a>添加节点</h1><h2 id="create-系列方法"><a href="#create-系列方法" class="headerlink" title="create 系列方法"></a>create 系列方法</h2><ul>
<li><p>document.creatElement()：创建新的元素节点。一个参数，标签名</p>
</li>
<li><p>document.createTextNode()：创建新的文本节点。一个参数，要插入的节点的文本</p>
</li>
<li><p>document.createDocumentFragment()：创建文档片段</p>
</li>
<li><p>document.createComment()：传入一个注释文本，创建一个注释节点</p>
</li>
<li><p>node1.appendChild(node2);将node2（节点二）装填到node1（节点1）内。</p>
</li>
</ul>
<p>document.createElement 还能支持创建当前浏览器不支持的标签名，在IE6-8下，这是一个著名的 hack</p>
<h3 id="创建节点示例一"><a href="#创建节点示例一" class="headerlink" title="创建节点示例一"></a>创建节点示例一</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">var newDiv = document.createElement(&quot;div&quot;); // 创建元素节点，这句话就是在窗口创建div元素</span><br><span class="line">var newContent = document.createTextNode(&quot;Hi there and greetings!&quot;); // 创建文本节点及其内容</span><br><span class="line">newDiv.appendChild(newContent); // 将文本节点装填到元素节点内</span><br></pre></td></tr></table></figure>

<h3 id="创建节点示例二"><a href="#创建节点示例二" class="headerlink" title="创建节点示例二"></a>创建节点示例二</h3><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line">var comment = document.createComment(&quot;A comment&quot;);</span><br><span class="line">    var fragment = document.createDocumentFragment();</span><br><span class="line">    var ul = document.getElementById(&quot;myList&quot;);// HTML 文档中ul的id为myList</span><br><span class="line">    var li = null;</span><br><span class="line">    for(var i = 0; i &lt; 3; i++)&#123;</span><br><span class="line">        li = document.createElement(&quot;li&quot;);</span><br><span class="line">        li.appendChild(document.createTextNode(&quot;Item &quot;+ (i+1)));</span><br><span class="line">        fragment.appendChild(li);</span><br><span class="line">    &#125;</span><br><span class="line">    ul.appendChild(fragment);</span><br><span class="line">    // insertBefore 有两个参数，一个是要插入的节点，另一个是插入节点相对的对象，插入节点要插入到哪个对象的前面的对象，这里的第二个参数是ul</span><br><span class="line">    document.body.insertBefore(comment, document.body.firstChild);</span><br></pre></td></tr></table></figure>

<h1 id="IE-浏览器条件编译"><a href="#IE-浏览器条件编译" class="headerlink" title="IE 浏览器条件编译"></a>IE 浏览器条件编译</h1><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">// 如果是IE浏览器，则!!0为假，不return。如果不是IE浏览器，则!0为真，返回并且不执行条件编译后面的代码</span><br><span class="line">if(!</span><br><span class="line">/*@cc_on!@/</span><br><span class="line">0) return;</span><br></pre></td></tr></table></figure>

<h1 id="高效创建节点的方法"><a href="#高效创建节点的方法" class="headerlink" title="高效创建节点的方法"></a>高效创建节点的方法</h1><ul>
<li><p>innerHTML：用来设置或获取当前标签的起始和结束里面的内容</p>
</li>
<li><p>outerHTML：返回调用它的元素及所有子节点的 HTML 标签，包含元素自身的标签</p>
</li>
<li><p>innerText：设置或获取位于对象起始和结束标签内的文本，低版本火狐浏览器不支持，可用 textContent 方法</p>
</li>
</ul>
<h2 id="使用-innerHTML-的限制"><a href="#使用-innerHTML-的限制" class="headerlink" title="使用 innerHTML 的限制"></a>使用 innerHTML 的限制</h2><ul>
<li><p>字符串的最左边不能出现空白，IE6~8会自动移除它</p>
</li>
<li><p>大多数浏览器不会对 script 标签进行脚本执行操作</p>
<ol>
<li><p>为 script 标签添加 defer 属性</p>
</li>
<li><p>script 标签要在有作用域的元素之后</p>
</li>
</ol>
</li>
<li><p>不能单独创建 meta，style，link等元素，一定要在前面加上一些字符</p>
</li>
</ul>
<h2 id="避开空白节点"><a href="#避开空白节点" class="headerlink" title="避开空白节点"></a>避开空白节点</h2><ol>
<li><p>nodeType</p>
</li>
<li><p>第二套 API</p>
</li>
</ol>
<h1 id="类数组对象"><a href="#类数组对象" class="headerlink" title="类数组对象"></a>类数组对象</h1><h2 id="NodeList-对象的特点"><a href="#NodeList-对象的特点" class="headerlink" title="NodeList 对象的特点"></a>NodeList 对象的特点</h2><p>NodeList 是 childNodes 的保存的对象</p>
<ul>
<li><p>NodeList 是一种类数组对象，用于保存一组有序的节点</p>
</li>
<li><p>可以通过方括号语法来访问 NodeList 的值，有 item 方法与 length 属性</p>
</li>
<li><p>它并不是 Array 的实例，没有数组对象的方法</p>
</li>
</ul>
<h2 id="类数组对象-HTMLCollection"><a href="#类数组对象-HTMLCollection" class="headerlink" title="类数组对象 HTMLCollection"></a>类数组对象 HTMLCollection</h2><ul>
<li><p>Ele.getElementsByTagName()：会根据节点的名称返回一组元素的集合</p>
</li>
<li><p>document.scripts：会返回页面里的全部 script 的集合</p>
</li>
<li><p>document.links：会返回页面里的全部 a 元素</p>
</li>
<li><p>document.images：会返回页面里的全部 image 元素</p>
</li>
<li><p>document.forms：会返回页面里全部的页面表单</p>
</li>
<li><p>tr.cells：会返回 tr 的所有 td 子元素的集合</p>
</li>
<li><p>select.options：会返回这个 select 属性的全部选项</p>
</li>
</ul>
<h2 id="namedItem"><a href="#namedItem" class="headerlink" title="namedItem()"></a>namedItem()</h2><p>该方法返回 HTMLCollection 对象中指定 ID 或 name 的元素</p>
<h3 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>HTMLCollection.namedItem(name)</p>
</blockquote>
<h3 id="参数说明"><a href="#参数说明" class="headerlink" title="参数说明"></a>参数说明</h3><p>name：必需。你要返回元素的 id 或 name 属性的值</p>
<h2 id="类数组对象-NamedNodeMap"><a href="#类数组对象-NamedNodeMap" class="headerlink" title="类数组对象 NamedNodeMap"></a>类数组对象 NamedNodeMap</h2><p>主要用于获取属性的属性值</p>
<ul>
<li><p>Ele.attributes：返回指定节点的属性集合</p>
</li>
<li><p>Ele.attributes.getNamedItem(“attributeName”).nodeValue：返回指定的属性节点。attributeName为要查找的属性值的属性名，该方法只能获取在元素上定义的属性值</p>
</li>
</ul>
<h2 id="类数组对象的动态性"><a href="#类数组对象的动态性" class="headerlink" title="类数组对象的动态性"></a>类数组对象的动态性</h2><ul>
<li><p>NodeList，HTMLCollection，NamedNodeMap 三个集合都是动态的，是有生命的、有呼吸的对象</p>
</li>
<li><p>它们实际上是基于 DOM 结构动态执行查询的结果，因此 DOM 结构的变化能够自动反映这些对象</p>
</li>
<li><p>每当文档结构发生变化时，它们都会得到更新。因此，它们始终都会保存着最新、最准确的信息</p>
</li>
</ul>
<h1 id="节点查找方法"><a href="#节点查找方法" class="headerlink" title="节点查找方法"></a>节点查找方法</h1><ul>
<li><p>getElementById()</p>
</li>
<li><p>getElementsByName()</p>
</li>
<li><p>getElementsTagName()</p>
</li>
<li><p>getElementsByClassName()</p>
</li>
<li><p>querySelector()：返回文档中匹配指定 CSS 选择器的一个元素，括号中写符合 CSS 语法的字符</p>
</li>
<li><p>querySeletorAll()：返回文档中匹配指定 CSS 选择器的一组元素，括号中写符合 CSS 语法的字符</p>
</li>
</ul>
<p>前三个只能是 document 对象的方法</p>
<p>querySelectorAll() 和 querySelector() 方法返回的是一个静态的 NodeList ,所谓静态 NodeList 就是对底层 document 的更改不会影响到返回的这个 NodeList 对象.此时返回的 NodeList 只是 querySelectorAll() 方法被调用时的文档状态的快照。</p>
<h1 id="操作节点"><a href="#操作节点" class="headerlink" title="操作节点"></a>操作节点</h1><ul>
<li><p>appendChild()：为指定元素节点的最后一个子节点之后添加节点。该方法返回新的子节点</p>
</li>
<li><p>insertBefore()：在指定的已有子节点之前插入新的子节点。该方法返回新创建的节点</p>
</li>
<li><p>replaceChild()：新节点替换某个子节点。返回被替换的节点</p>
</li>
<li><p>cloneNode()：创建节点的拷贝，并返回该副本。拷贝的节点要有父节点，如果没有父节点，要通过上面三个方法对其进行添加</p>
</li>
<li><p>normalize()：合并相邻的文本节点</p>
</li>
<li><p>splitText()：按照指定的位置把文本节点分割为两个节点。返回分割后新的文本节点</p>
</li>
</ul>
<h2 id="参数说明-1"><a href="#参数说明-1" class="headerlink" title="参数说明"></a>参数说明</h2><table>
<thead>
<tr>
<th>方法</th>
<th>参数</th>
</tr>
</thead>
<tbody><tr>
<td>appendChild()</td>
<td>appendChild(要插入的节点)</td>
</tr>
<tr>
<td>insertBefore()</td>
<td>insertBefore(要插入的节点，指定的子节点)</td>
</tr>
<tr>
<td>replaceChild()</td>
<td>replaceChild(要插入的节点，被替换的节点)</td>
</tr>
<tr>
<td>cloneNode()</td>
<td>cloneNode(boolean)，若Boolean为false，则只复制该节点。如果未true，则为深度拷贝，将该节点下的子节点一起拷贝</td>
</tr>
<tr>
<td>splitText()</td>
<td>splitText(num)，节点从num位置被分割，包括num该位置的字符</td>
</tr>
</tbody></table>
<h2 id="nodeValue-与-innerHTML-的区别"><a href="#nodeValue-与-innerHTML-的区别" class="headerlink" title="nodeValue 与 innerHTML 的区别"></a>nodeValue 与 innerHTML 的区别</h2><h3 id="nodeValue"><a href="#nodeValue" class="headerlink" title="nodeValue"></a>nodeValue</h3><p>nodeValue 属性设置或返回指定节点的节点值。（文本节点和属性节点可以用nodeValue）</p>
<h3 id="innerHTML"><a href="#innerHTML" class="headerlink" title="innerHTML"></a>innerHTML</h3><p>innerText属性可以获取或者设置指定元素的文本内容</p>
<h3 id="区别"><a href="#区别" class="headerlink" title="区别"></a>区别</h3><p>nodeValue 只会读取 element 这个节点的节点值，不包括子节点，而 innerHTML 包括子节点</p>
<h1 id="删除节点"><a href="#删除节点" class="headerlink" title="删除节点"></a>删除节点</h1><h2 id="涉及方法"><a href="#涉及方法" class="headerlink" title="涉及方法"></a>涉及方法</h2><ul>
<li><p>removeChild()：删除某个节点中指定的子节点。返回被删除的节点</p>
</li>
<li><p>removeNode()：IE的私有实现。将目标节点从文档中删除，返回目标节点</p>
</li>
<li><p>innerHTML</p>
</li>
<li><p>deleteContents</p>
</li>
<li><p>textContent</p>
</li>
</ul>
<h2 id="参数说明-2"><a href="#参数说明-2" class="headerlink" title="参数说明"></a>参数说明</h2><table>
<thead>
<tr>
<th>方法</th>
<th>参数说明</th>
</tr>
</thead>
<tbody><tr>
<td>removeChild()</td>
<td>一个参数。为要删除的子节点</td>
</tr>
<tr>
<td>removeNode()</td>
<td>一个参数为布尔值，默认值为false。若为false，仅删除目标节点，保留子节点。若为true，功能和removeChild类似</td>
</tr>
</tbody></table>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/08/26/JavaScript基础知识点-DOM操作之节点/" data-id="ck4r400qg005il0w0jdump3r9" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-JavaScript基础知识点-BOM之navigator对象及方法" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/08/26/JavaScript基础知识点-BOM之navigator对象及方法/" class="article-date">
  <time datetime="2019-08-26T12:03:33.000Z" itemprop="datePublished">2019-08-26</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/JavaScript/">JavaScript</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/08/26/JavaScript基础知识点-BOM之navigator对象及方法/">JavaScript基础知识点--BOM之navigator对象及方法</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h1 id="Navigator-对象"><a href="#Navigator-对象" class="headerlink" title="Navigator 对象"></a>Navigator 对象</h1><h2 id="UserAgent"><a href="#UserAgent" class="headerlink" title="UserAgent"></a>UserAgent</h2><p>用来识别浏览器名称、版本、引擎以及操作系统等信息的内容</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/08/26/JavaScript基础知识点-BOM之navigator对象及方法/" data-id="ck4r400q6004zl0w0id10iic5" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-JavaScript基础知识点-BOM之screen对象及方法" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/08/26/JavaScript基础知识点-BOM之screen对象及方法/" class="article-date">
  <time datetime="2019-08-26T11:52:36.000Z" itemprop="datePublished">2019-08-26</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/JavaScript/">JavaScript</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/08/26/JavaScript基础知识点-BOM之screen对象及方法/">JavaScript基础知识点--BOM之screen对象及方法</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h1 id="screen-对象"><a href="#screen-对象" class="headerlink" title="screen 对象"></a>screen 对象</h1><p>Screen 对象包含有关客户端显示屏幕的信息</p>
<h2 id="availWidth"><a href="#availWidth" class="headerlink" title="availWidth"></a>availWidth</h2><h3 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>screen.availWidth</p>
</blockquote>
<h3 id="功能"><a href="#功能" class="headerlink" title="功能"></a>功能</h3><p>返回可用的屏幕宽度</p>
<h2 id="availHeight"><a href="#availHeight" class="headerlink" title="availHeight"></a>availHeight</h2><h3 id="语法-1"><a href="#语法-1" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>screen.availHeight</p>
</blockquote>
<h3 id="功能-1"><a href="#功能-1" class="headerlink" title="功能"></a>功能</h3><p>返回可用的屏幕高度</p>
<h3 id="说明"><a href="#说明" class="headerlink" title="说明"></a>说明</h3><p>availHeight 获取到的是除了任务栏之外的内容</p>
<h1 id="获取窗口属性"><a href="#获取窗口属性" class="headerlink" title="获取窗口属性"></a>获取窗口属性</h1><h2 id="innerHeight"><a href="#innerHeight" class="headerlink" title="innerHeight"></a>innerHeight</h2><h3 id="语法-2"><a href="#语法-2" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>window.innerHeight</p>
</blockquote>
<h3 id="功能-2"><a href="#功能-2" class="headerlink" title="功能"></a>功能</h3><p>获取窗口的高</p>
<h2 id="innerWidth"><a href="#innerWidth" class="headerlink" title="innerWidth"></a>innerWidth</h2><h3 id="语法-3"><a href="#语法-3" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>window.innerWidth</p>
</blockquote>
<h3 id="功能-3"><a href="#功能-3" class="headerlink" title="功能"></a>功能</h3><p>获取窗口的宽</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/08/26/JavaScript基础知识点-BOM之screen对象及方法/" data-id="ck4r400q80052l0w0vuywp2lw" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-JavaScript基础知识点-BOM之history对象及方法" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/08/26/JavaScript基础知识点-BOM之history对象及方法/" class="article-date">
  <time datetime="2019-08-26T10:35:17.000Z" itemprop="datePublished">2019-08-26</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/JavaScript/">JavaScript</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/08/26/JavaScript基础知识点-BOM之history对象及方法/">JavaScript基础知识点--BOM之history对象及方法</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h1 id="history-对象"><a href="#history-对象" class="headerlink" title="history 对象"></a>history 对象</h1><p>history 对象保存了用户在浏览器中访问页面的历史记录</p>
<h1 id="history-对象方法"><a href="#history-对象方法" class="headerlink" title="history 对象方法"></a>history 对象方法</h1><h2 id="back"><a href="#back" class="headerlink" title="back()"></a>back()</h2><h3 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>history.back()</p>
</blockquote>
<h3 id="功能"><a href="#功能" class="headerlink" title="功能"></a>功能</h3><p>回到历史记录的上一步</p>
<h3 id="说明"><a href="#说明" class="headerlink" title="说明"></a>说明</h3><p>相当于使用了 history.go(-1)</p>
<h2 id="forward"><a href="#forward" class="headerlink" title="forward()"></a>forward()</h2><h3 id="语法-1"><a href="#语法-1" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>history.forward()</p>
</blockquote>
<h3 id="功能-1"><a href="#功能-1" class="headerlink" title="功能"></a>功能</h3><p>回到历史记录的下一步</p>
<h3 id="说明-1"><a href="#说明-1" class="headerlink" title="说明"></a>说明</h3><p>相当于使用了 history.go(1)</p>
<h2 id="go-n"><a href="#go-n" class="headerlink" title="go(-n)"></a>go(-n)</h2><h3 id="语法-2"><a href="#语法-2" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>history.go(-n)</p>
</blockquote>
<h3 id="功能-2"><a href="#功能-2" class="headerlink" title="功能"></a>功能</h3><p>回到历史记录的前n步</p>
<h2 id="go-n-1"><a href="#go-n-1" class="headerlink" title="go(n)"></a>go(n)</h2><h3 id="语法-3"><a href="#语法-3" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>history.go(n)</p>
</blockquote>
<h3 id="功能-3"><a href="#功能-3" class="headerlink" title="功能"></a>功能</h3><p>回到历史记录的后n步</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/08/26/JavaScript基础知识点-BOM之history对象及方法/" data-id="ck4r400q3004rl0w0zuvye9kb" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-JavaScript基础知识点-BOM之location对象及方法" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/08/26/JavaScript基础知识点-BOM之location对象及方法/" class="article-date">
  <time datetime="2019-08-26T08:05:35.000Z" itemprop="datePublished">2019-08-26</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/JavaScript/">JavaScript</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/08/26/JavaScript基础知识点-BOM之location对象及方法/">JavaScript基础知识点--BOM之location对象及方法</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h1 id="location-对象"><a href="#location-对象" class="headerlink" title="location 对象"></a>location 对象</h1><p>location 对象提供了与当前窗口中加载的文档有关的信息，还提供了一些导航的功能，它既是 window 对象的属性，也是 document 对象的属性</p>
<h1 id="location-对象的常用属性"><a href="#location-对象的常用属性" class="headerlink" title="location 对象的常用属性"></a>location 对象的常用属性</h1><h2 id="href"><a href="#href" class="headerlink" title="href"></a>href</h2><p>#3# 语法</p>
<blockquote>
<p>location.href</p>
</blockquote>
<p>###n 功能</p>
<p>返回当前加载页面的完整URL</p>
<h3 id="说明"><a href="#说明" class="headerlink" title="说明"></a>说明</h3><p>location.href 与 window.location.href 等价</p>
<h2 id="hash"><a href="#hash" class="headerlink" title="hash"></a>hash</h2><h3 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>location.hash</p>
</blockquote>
<h3 id="功能"><a href="#功能" class="headerlink" title="功能"></a>功能</h3><p>返回 URL 中的 hash（#号后跟零或多个字符），如果不包含这返回空字符串</p>
<h3 id="说明-1"><a href="#说明-1" class="headerlink" title="说明"></a>说明</h3><p>如果写了 location.hash=#xxx 相当于为当前对象设置锚点</p>
<p>如果未写，相当于为当前页面返回 URL 中的 #xxx</p>
<h2 id="host"><a href="#host" class="headerlink" title="host"></a>host</h2><h3 id="语法-1"><a href="#语法-1" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>location.host</p>
</blockquote>
<h3 id="功能-1"><a href="#功能-1" class="headerlink" title="功能"></a>功能</h3><p>返回服务器名称和端口号</p>
<h2 id="hostname"><a href="#hostname" class="headerlink" title="hostname"></a>hostname</h2><h3 id="语法-2"><a href="#语法-2" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>location.hostname</p>
</blockquote>
<h3 id="功能-2"><a href="#功能-2" class="headerlink" title="功能"></a>功能</h3><p>返回不带端口号的服务器名称</p>
<h2 id="pathname"><a href="#pathname" class="headerlink" title="pathname"></a>pathname</h2><h3 id="语法-3"><a href="#语法-3" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>location.pathname</p>
</blockquote>
<h3 id="功能-3"><a href="#功能-3" class="headerlink" title="功能"></a>功能</h3><p>返回 URL 中的目录和（或）文件名</p>
<h2 id="port"><a href="#port" class="headerlink" title="port"></a>port</h2><h3 id="语法-4"><a href="#语法-4" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>location.port</p>
</blockquote>
<h3 id="功能-4"><a href="#功能-4" class="headerlink" title="功能"></a>功能</h3><p>返回 URL 中指定的端口号，如果没有，返回空字符串</p>
<h2 id="protocol"><a href="#protocol" class="headerlink" title="protocol"></a>protocol</h2><h3 id="语法-5"><a href="#语法-5" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>location.protocol</p>
</blockquote>
<h3 id="功能-5"><a href="#功能-5" class="headerlink" title="功能"></a>功能</h3><p>返回页面使用的协议</p>
<h2 id="search"><a href="#search" class="headerlink" title="search"></a>search</h2><h3 id="语法-6"><a href="#语法-6" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>location.search</p>
</blockquote>
<h3 id="功能-6"><a href="#功能-6" class="headerlink" title="功能"></a>功能</h3><p>返回 URL 的查询字符串。这个字符串以问号开头</p>
<h1 id="位置操作"><a href="#位置操作" class="headerlink" title="位置操作"></a>位置操作</h1><h2 id="改变浏览器位置的方法："><a href="#改变浏览器位置的方法：" class="headerlink" title="改变浏览器位置的方法："></a>改变浏览器位置的方法：</h2><p>location.href 属性</p>
<h2 id="location-对象其他属性也可改变-URL"><a href="#location-对象其他属性也可改变-URL" class="headerlink" title="location 对象其他属性也可改变 URL"></a>location 对象其他属性也可改变 URL</h2><ul>
<li><p>location.hash</p>
</li>
<li><p>location.search</p>
</li>
</ul>
<h2 id="replace"><a href="#replace" class="headerlink" title="replace()"></a>replace()</h2><h3 id="语法-7"><a href="#语法-7" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>location.replace(url)</p>
</blockquote>
<h3 id="功能-7"><a href="#功能-7" class="headerlink" title="功能"></a>功能</h3><p>重新定向 URL</p>
<h3 id="说明-2"><a href="#说明-2" class="headerlink" title="说明"></a>说明</h3><p>使用 location.replace 不会在历史记录中生成新记录</p>
<h2 id="reload"><a href="#reload" class="headerlink" title="reload()"></a>reload()</h2><h3 id="语法-8"><a href="#语法-8" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>location.reload()</p>
</blockquote>
<h3 id="功能-8"><a href="#功能-8" class="headerlink" title="功能"></a>功能</h3><p>重新加载当前显示的页面</p>
<h3 id="说明-3"><a href="#说明-3" class="headerlink" title="说明"></a>说明</h3><ul>
<li><p>location.reload()有可能从缓存中加载</p>
</li>
<li><p>location.reload(true)从服务器重新加载</p>
</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/08/26/JavaScript基础知识点-BOM之location对象及方法/" data-id="ck4r400q4004ul0w0q84lgjdd" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-JavaScript基础知识点-BOM基础及window对象" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/08/25/JavaScript基础知识点-BOM基础及window对象/" class="article-date">
  <time datetime="2019-08-25T08:41:38.000Z" itemprop="datePublished">2019-08-25</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/JavaScript/">JavaScript</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/08/25/JavaScript基础知识点-BOM基础及window对象/">JavaScript基础知识点--BOM基础及window对象</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h1 id="什么是-BOM"><a href="#什么是-BOM" class="headerlink" title="什么是 BOM"></a>什么是 BOM</h1><p>BOM（browser object model）浏览器对象模型</p>
<h2 id="BOM-对象"><a href="#BOM-对象" class="headerlink" title="BOM 对象"></a>BOM 对象</h2><ul>
<li><p>window</p>
</li>
<li><p>navigator</p>
</li>
<li><p>screen</p>
</li>
<li><p>history</p>
</li>
<li><p>location</p>
</li>
<li><p>document</p>
</li>
<li><p>event</p>
</li>
</ul>
<h1 id="window"><a href="#window" class="headerlink" title="window"></a>window</h1><p>window 是浏览器的一个实例，在浏览器中，window 对象有双重角色，它既是通过 JavaScript访问浏览器窗口的一个接口，又是 ECMAScript 规定的 Global 对象</p>
<p>所有全局变量和全局方法都被归在 window 对象上</p>
<h2 id="window-对象方法"><a href="#window-对象方法" class="headerlink" title="window 对象方法"></a>window 对象方法</h2><h3 id="alert"><a href="#alert" class="headerlink" title="alert"></a>alert</h3><h4 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h4><blockquote>
<p>window.alert(“content”)</p>
</blockquote>
<h4 id="功能"><a href="#功能" class="headerlink" title="功能"></a>功能</h4><p>显示带有一段消息和一个确认按钮的警告框</p>
<h3 id="confirm"><a href="#confirm" class="headerlink" title="confirm"></a>confirm</h3><h4 id="语法-1"><a href="#语法-1" class="headerlink" title="语法"></a>语法</h4><blockquote>
<p>window.confirm(“message”)</p>
</blockquote>
<h5 id="功能-1"><a href="#功能-1" class="headerlink" title="功能"></a>功能</h5><p>显示一个带有指定消息和 OK 及取消按钮的对话框</p>
<h5 id="返回值"><a href="#返回值" class="headerlink" title="返回值"></a>返回值</h5><ul>
<li><p>如果用户点击确定按钮，则 confirm()返回 true</p>
</li>
<li><p>如果用户点击取消按钮，则 confirm()返回 false</p>
</li>
</ul>
<h3 id="prompt"><a href="#prompt" class="headerlink" title="prompt"></a>prompt</h3><h4 id="语法-2"><a href="#语法-2" class="headerlink" title="语法"></a>语法</h4><blockquote>
<p>window.prompt(“text, defaultText”)</p>
</blockquote>
<h4 id="参数说明"><a href="#参数说明" class="headerlink" title="参数说明"></a>参数说明</h4><ul>
<li><p>text：要在对话框中显示的纯文本（而不是 HTML 格式的文本）</p>
</li>
<li><p>defaultText：默认的输入文本</p>
</li>
</ul>
<h4 id="返回值-1"><a href="#返回值-1" class="headerlink" title="返回值"></a>返回值</h4><ul>
<li><p>如果用户单击提示框的取消按钮，则返回 null</p>
</li>
<li><p>如果用户单击确认按钮，则返回输入字段当前显示的文本</p>
</li>
</ul>
<h3 id="open"><a href="#open" class="headerlink" title="open"></a>open</h3><h4 id="语法-3"><a href="#语法-3" class="headerlink" title="语法"></a>语法</h4><blockquote>
<p>window.open(pageURL, name, parameters)</p>
</blockquote>
<h4 id="功能-2"><a href="#功能-2" class="headerlink" title="功能"></a>功能</h4><p>打开一个新的浏览器窗口或查找一个已命名的窗口</p>
<h4 id="参数说明-1"><a href="#参数说明-1" class="headerlink" title="参数说明"></a>参数说明</h4><ul>
<li><p>pageURL：子窗口路径</p>
</li>
<li><p>name：子窗口句柄（name 声明了新窗口的名称，方便后期通过 name 对子窗口进行引用）</p>
</li>
<li><p>parameters：窗口参数（各参数用逗号分隔）</p>
</li>
</ul>
<h5 id="参数parameters说明"><a href="#参数parameters说明" class="headerlink" title="参数parameters说明"></a>参数parameters说明</h5><table>
<thead>
<tr>
<th>可选参数</th>
<th>说明</th>
</tr>
</thead>
<tbody><tr>
<td>width</td>
<td>窗口宽度</td>
</tr>
<tr>
<td>height</td>
<td>窗口高度</td>
</tr>
<tr>
<td>left</td>
<td>窗口X轴坐标</td>
</tr>
<tr>
<td>top</td>
<td>窗口Y轴坐标</td>
</tr>
<tr>
<td>toolbar</td>
<td>是否显示浏览器的工具栏</td>
</tr>
<tr>
<td>menubar</td>
<td>是否显示菜单栏</td>
</tr>
<tr>
<td>scrollbars</td>
<td>是否显示滚动条</td>
</tr>
<tr>
<td>location</td>
<td>是否显示地址字段</td>
</tr>
<tr>
<td>status</td>
<td>是否添加状态栏</td>
</tr>
</tbody></table>
<h3 id="close"><a href="#close" class="headerlink" title="close"></a>close</h3><h4 id="语法-4"><a href="#语法-4" class="headerlink" title="语法"></a>语法</h4><blockquote>
<p>window.close()</p>
</blockquote>
<h4 id="功能-3"><a href="#功能-3" class="headerlink" title="功能"></a>功能</h4><p>关闭浏览器窗口</p>
<h1 id="超时调用"><a href="#超时调用" class="headerlink" title="超时调用"></a>超时调用</h1><h2 id="语法-5"><a href="#语法-5" class="headerlink" title="语法"></a>语法</h2><blockquote>
<p>setTimeout(code, millisec)</p>
</blockquote>
<h2 id="功能-4"><a href="#功能-4" class="headerlink" title="功能"></a>功能</h2><p>在指定的毫秒数后调用函数或计算表达式</p>
<h2 id="参数说明："><a href="#参数说明：" class="headerlink" title="参数说明："></a>参数说明：</h2><ul>
<li><p>code：要调用的函数或要执行的 JavaScript 代码串</p>
</li>
<li><p>millisec：在执行代码前需等待的毫秒数</p>
</li>
</ul>
<h2 id="返回值-2"><a href="#返回值-2" class="headerlink" title="返回值"></a>返回值</h2><p>该方法返回一个 ID 值，通过它取消超时调用</p>
<h1 id="清除超时调用"><a href="#清除超时调用" class="headerlink" title="清除超时调用"></a>清除超时调用</h1><h2 id="语法-6"><a href="#语法-6" class="headerlink" title="语法"></a>语法</h2><blockquote>
<p>clearTimeout(id_of_settimeout)</p>
</blockquote>
<h2 id="功能-5"><a href="#功能-5" class="headerlink" title="功能"></a>功能</h2><p>取消由 setTimeout() 方法设置的 timeout</p>
<h2 id="参数说明-2"><a href="#参数说明-2" class="headerlink" title="参数说明"></a>参数说明</h2><ul>
<li>id_of_settimeout：由 setTimeout() 返回的 ID 值，该值标识要取消的延迟执行代码块</li>
</ul>
<h1 id="间歇调用"><a href="#间歇调用" class="headerlink" title="间歇调用"></a>间歇调用</h1><h2 id="语法-7"><a href="#语法-7" class="headerlink" title="语法"></a>语法</h2><blockquote>
<p>setInterval(code, millisec)</p>
</blockquote>
<h2 id="功能-6"><a href="#功能-6" class="headerlink" title="功能"></a>功能</h2><p>每隔指定的时间执行一次代码</p>
<ul>
<li><p>code：要调用的函数或要执行的代码串</p>
</li>
<li><p>millsec：周期性执行或调用 code 之间的时间间隔，以毫秒计</p>
</li>
</ul>
<h1 id="清除间歇调用"><a href="#清除间歇调用" class="headerlink" title="清除间歇调用"></a>清除间歇调用</h1><h2 id="语法-8"><a href="#语法-8" class="headerlink" title="语法"></a>语法</h2><blockquote>
<p>clearInterval(id_of_setinterval)</p>
</blockquote>
<h2 id="功能-7"><a href="#功能-7" class="headerlink" title="功能"></a>功能</h2><p>取消 setInterval() 方法设置的 interval</p>
<h2 id="参数说明：-1"><a href="#参数说明：-1" class="headerlink" title="参数说明："></a>参数说明：</h2><ul>
<li>id_of_setinterval：由 setInterval() 返回的 ID 值</li>
</ul>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/08/25/JavaScript基础知识点-BOM基础及window对象/" data-id="ck4r400qa0057l0w0qo2ir4og" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-JavaScript基础知识点-DOM事件" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/08/25/JavaScript基础知识点-DOM事件/" class="article-date">
  <time datetime="2019-08-25T00:36:42.000Z" itemprop="datePublished">2019-08-25</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/JavaScript/">JavaScript</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/08/25/JavaScript基础知识点-DOM事件/">JavaScript基础知识点--DOM事件</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h1 id="什么是事件"><a href="#什么是事件" class="headerlink" title="什么是事件"></a>什么是事件</h1><p>事件就是文档或浏览器窗口中发生的一些特定的交互瞬间</p>
<h2 id="HTML-事件"><a href="#HTML-事件" class="headerlink" title="HTML 事件"></a>HTML 事件</h2><p>直接在 HTML 元素标签内添加事件，执行脚本</p>
<h3 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p><code>&lt;tag 事件=&quot;执行脚本&quot;&gt;&lt;/tag&gt;</code></p>
</blockquote>
<h3 id="功能"><a href="#功能" class="headerlink" title="功能"></a>功能</h3><p>在 HTML 元素上绑定事件</p>
<h3 id="不建议使用-HTML-事件"><a href="#不建议使用-HTML-事件" class="headerlink" title="不建议使用 HTML 事件"></a>不建议使用 HTML 事件</h3><ol>
<li><p>多元素绑定相同事件时，效率低</p>
</li>
<li><p>不建议在 HTML 元素中写 JavaScript 代码</p>
</li>
</ol>
<h3 id="说明"><a href="#说明" class="headerlink" title="说明"></a>说明</h3><p>执行脚本可以是一个函数的调用</p>
<h2 id="DOM-0级事件"><a href="#DOM-0级事件" class="headerlink" title="DOM 0级事件"></a>DOM 0级事件</h2><ol>
<li><p>通过 DOM 获取 HTML 元素</p>
</li>
<li><p>（获取 HTML 元素）.事件 = 执行脚本</p>
</li>
</ol>
<h3 id="语法-1"><a href="#语法-1" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>ele.事件 = 执行脚本</p>
</blockquote>
<h3 id="功能-1"><a href="#功能-1" class="headerlink" title="功能"></a>功能</h3><p>在 DOM 对象上绑定事件</p>
<h3 id="说明："><a href="#说明：" class="headerlink" title="说明："></a>说明：</h3><p>执行脚本可以是一个匿名函数，也可以是一个函数的调用</p>
<p>除非调用匿名函数，否则调用普通函数不能加括号</p>
<h1 id="鼠标事件"><a href="#鼠标事件" class="headerlink" title="鼠标事件"></a>鼠标事件</h1><table>
<thead>
<tr>
<th>事件名称</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td>onload</td>
<td>页面加载时触发</td>
</tr>
<tr>
<td>onclick</td>
<td>鼠标点击时触发</td>
</tr>
<tr>
<td>onmouseover</td>
<td>鼠标滑过时触发</td>
</tr>
<tr>
<td>onmouseout</td>
<td>鼠标离开时触发</td>
</tr>
<tr>
<td>onfocus</td>
<td>获得焦点时触发</td>
</tr>
<tr>
<td>onblur</td>
<td>失去焦点时触发</td>
</tr>
<tr>
<td>onchange</td>
<td>域的内容改变时发生</td>
</tr>
<tr>
<td>onsubmit</td>
<td>表单中的确认按钮被点击时发生，这个事件不是加在按钮上，而是表单上</td>
</tr>
<tr>
<td>onmousedown</td>
<td>鼠标按钮在元素上按下时触发</td>
</tr>
<tr>
<td>onmousemove</td>
<td>在鼠标指针移动是发生</td>
</tr>
<tr>
<td>onmouseup</td>
<td>在元素上松开鼠标按钮时触发</td>
</tr>
<tr>
<td>onresize</td>
<td>当调整浏览器窗口的大小时触发</td>
</tr>
<tr>
<td>onscroll</td>
<td>拖动滚动条滚动时触发</td>
</tr>
<tr>
<td>ondblclick</td>
<td>双击元素触发</td>
</tr>
</tbody></table>
<p>onfocus 事件用于 input 标签 type 为 text、password 和 textarea 标签</p>
<h1 id="键盘事件与-keyCode-属性"><a href="#键盘事件与-keyCode-属性" class="headerlink" title="键盘事件与 keyCode 属性"></a>键盘事件与 keyCode 属性</h1><table>
<thead>
<tr>
<th>事件名称</th>
<th>作用</th>
</tr>
</thead>
<tbody><tr>
<td>onkeydown</td>
<td>在用户按下一个键盘按键时发生</td>
</tr>
<tr>
<td>onkeypress</td>
<td>在按下键盘按键时发生（只会响应字母与数字符号）</td>
</tr>
<tr>
<td>onkeyup</td>
<td>在键盘按键被松开时发生</td>
</tr>
<tr>
<td>keyCode</td>
<td>返回 onkeypress、onkeydown 或 onkeyup 事件触发的键的值的字符代码，或键的代码</td>
</tr>
<tr>
<td>charCode</td>
<td>返回键的ASCll码</td>
</tr>
<tr>
<td>textInput</td>
<td>只有在可编辑区域，按下能够输入实际字符的键时才会触发此事件</td>
</tr>
</tbody></table>
<h2 id="textInput-详解"><a href="#textInput-详解" class="headerlink" title="textInput 详解"></a>textInput 详解</h2><h3 id="第一种情况"><a href="#第一种情况" class="headerlink" title="第一种情况"></a>第一种情况</h3><p>输入框中按下enter键，触发的只有keypress事件</p>
<h3 id="第二种情况"><a href="#第二种情况" class="headerlink" title="第二种情况"></a>第二种情况</h3><p>按下a键，触发keypress和textinput事件</p>
<h2 id="键盘事件触发顺序"><a href="#键盘事件触发顺序" class="headerlink" title="键盘事件触发顺序"></a>键盘事件触发顺序</h2><ol>
<li><p>onkeydown</p>
</li>
<li><p>onkeypress</p>
</li>
<li><p>onkeyup</p>
</li>
</ol>
<h2 id="event"><a href="#event" class="headerlink" title="event"></a>event</h2><p>event 代表事件的状态，如触发 event 对象的元素、鼠标的位置及状态等</p>
<h2 id="获取按键的字符代码"><a href="#获取按键的字符代码" class="headerlink" title="获取按键的字符代码"></a>获取按键的字符代码</h2><figure class="highlight plain"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">document.onkeypress = function(event)&#123;</span><br><span class="line">    console.log(event.keyCode);</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<h2 id="charCode与keyCode的区别"><a href="#charCode与keyCode的区别" class="headerlink" title="charCode与keyCode的区别"></a>charCode与keyCode的区别</h2><p>charCode 返回onkeypress事件触发键值的字母代码。</p>
<p>keyCode 返回 onkeydown 或 onkeyup 事件的键的代码。</p>
<h1 id="其他事件"><a href="#其他事件" class="headerlink" title="其他事件"></a>其他事件</h1><table>
<thead>
<tr>
<th>事件名称</th>
<th>触发条件</th>
</tr>
</thead>
<tbody><tr>
<td>DOMNodeRemoved</td>
<td>Document 中任意元素被删除就会触发</td>
</tr>
<tr>
<td>DOMSubtreeModified</td>
<td>DOM结构中发生任何变化都会触发</td>
</tr>
<tr>
<td>DOMNodeRemoveFromDocument</td>
<td>从文档中移除之前会触发</td>
</tr>
<tr>
<td>DOMNodeInserted</td>
<td>Document 中任意元素被添加就会触发</td>
</tr>
<tr>
<td>DOMNodeInsertedIntoDocument</td>
<td>从文档中添加之前被触发</td>
</tr>
</tbody></table>
<h1 id="HTML5新增的事件"><a href="#HTML5新增的事件" class="headerlink" title="HTML5新增的事件"></a>HTML5新增的事件</h1><table>
<thead>
<tr>
<th>事件名称</th>
<th>触发条件</th>
</tr>
</thead>
<tbody><tr>
<td>DOMContentLoaded</td>
<td>在DOM树之后就会触发，不理会图像、JavaScript文件、CSS文件或其他资源是否已经下载。速度一定快于load事件</td>
</tr>
<tr>
<td>readystatechange</td>
<td>请参照下面的描述</td>
</tr>
<tr>
<td>hashchange</td>
<td>对象一定是window。#号后面的值变化时触发</td>
</tr>
</tbody></table>
<h2 id="readystatechange-事件详解"><a href="#readystatechange-事件详解" class="headerlink" title="readystatechange 事件详解"></a>readystatechange 事件详解</h2><p>提供文档或者元素加载过程，但很难预料与load事件一起使用时候</p>
<h3 id="返回值"><a href="#返回值" class="headerlink" title="返回值"></a>返回值</h3><ol>
<li><p>uninitialized：尚未初始化</p>
</li>
<li><p>loading：对象正在加载数据</p>
</li>
<li><p>interactive：可以操作对象，但还没有完全加载</p>
</li>
<li><p>对象已经加载完毕</p>
</li>
</ol>
<p>但其他资料并不是这样写的</p>
<p>请参照<a href="https://www.runoob.com/ajax/ajax-xmlhttprequest-onreadystatechange.html" target="_blank" rel="noopener">菜鸟教程–readystatechange 事件</a></p>
<h1 id="移动端常用的事件类型"><a href="#移动端常用的事件类型" class="headerlink" title="移动端常用的事件类型"></a>移动端常用的事件类型</h1><table>
<thead>
<tr>
<th>事件类型名称</th>
<th>触发</th>
</tr>
</thead>
<tbody><tr>
<td>touchstart</td>
<td>手指触摸屏幕</td>
</tr>
<tr>
<td>touchmove</td>
<td>手指在屏幕上滑动</td>
</tr>
<tr>
<td>touchend</td>
<td>手指从屏幕上移开</td>
</tr>
</tbody></table>
<h1 id="关于-this-指向"><a href="#关于-this-指向" class="headerlink" title="关于 this 指向"></a>关于 this 指向</h1><p>在事件触发的函数中，this 是对该 DOM 对象的引用</p>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/08/25/JavaScript基础知识点-DOM事件/" data-id="ck4r400qb005al0w02dbl7i2t" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li></ul>

    </footer>
  </div>
  
</article>


  
    <article id="post-JavaScript基础知识点-初识DOM" class="article article-type-post" itemscope itemprop="blogPost">
  <div class="article-meta">
    <a href="/2019/08/24/JavaScript基础知识点-初识DOM/" class="article-date">
  <time datetime="2019-08-24T08:42:41.000Z" itemprop="datePublished">2019-08-24</time>
</a>
    
  <div class="article-category">
    <a class="article-category-link" href="/categories/JavaScript/">JavaScript</a>
  </div>

  </div>
  <div class="article-inner">
    
    
      <header class="article-header">
        
  
    <h1 itemprop="name">
      <a class="article-title" href="/2019/08/24/JavaScript基础知识点-初识DOM/">JavaScript基础知识点--初识DOM</a>
    </h1>
  

      </header>
    
    <div class="article-entry" itemprop="articleBody">
      
        <hr>
<h1 id="JavaScript-DOM-基础"><a href="#JavaScript-DOM-基础" class="headerlink" title="JavaScript DOM 基础"></a>JavaScript DOM 基础</h1><p>DOM 是 Document Object Model（文档对象模型）的缩写</p>
<p>文档对象模型（DOM）是 HTML 和 XML 文档的编程接口，它提供了对文档的结构化的表述，并定义了一种方式可以使从程序中对该结构进行访问，从而改变文档的结构、样式和内容</p>
<h1 id="DOM-查找方法"><a href="#DOM-查找方法" class="headerlink" title="DOM 查找方法"></a>DOM 查找方法</h1><h2 id="getElementById"><a href="#getElementById" class="headerlink" title="getElementById"></a>getElementById</h2><h3 id="语法"><a href="#语法" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>document.getElementById(“id”)</p>
</blockquote>
<h3 id="功能"><a href="#功能" class="headerlink" title="功能"></a>功能</h3><p>返回对拥有指定 ID 的第一个对象的引用</p>
<h3 id="返回值"><a href="#返回值" class="headerlink" title="返回值"></a>返回值</h3><p>DOM 对象</p>
<h3 id="说明"><a href="#说明" class="headerlink" title="说明"></a>说明</h3><p>id 为 DOM 元素上 id 属性的值</p>
<h2 id="getElementsByTagName"><a href="#getElementsByTagName" class="headerlink" title="getElementsByTagName"></a>getElementsByTagName</h2><h3 id="语法-1"><a href="#语法-1" class="headerlink" title="语法"></a>语法</h3><blockquote>
<p>document.getElementsByTagName(“tag”)</p>
</blockquote>
<h3 id="功能-1"><a href="#功能-1" class="headerlink" title="功能"></a>功能</h3><p>返回一个对所有 tag 标签引用的集合</p>
<h3 id="返回值-1"><a href="#返回值-1" class="headerlink" title="返回值"></a>返回值</h3><p>数组</p>
<h3 id="说明-1"><a href="#说明-1" class="headerlink" title="说明"></a>说明</h3><p>tag 为要获取的标签名称</p>
<h1 id="设置元素样式"><a href="#设置元素样式" class="headerlink" title="设置元素样式"></a>设置元素样式</h1><h2 id="语法-2"><a href="#语法-2" class="headerlink" title="语法"></a>语法</h2><blockquote>
<p>ele.style.styleName=styleValue</p>
</blockquote>
<h2 id="功能-2"><a href="#功能-2" class="headerlink" title="功能"></a>功能</h2><p>设置 ele 元素的 CSS 样式</p>
<h2 id="参数说明："><a href="#参数说明：" class="headerlink" title="参数说明："></a>参数说明：</h2><ol>
<li><p>ele 为要设置样式的 DOM 对象</p>
</li>
<li><p>styleName 为要设置的样式名称，不能使用”-“连字符形式 font-size，使用驼峰命名形式 fontSize</p>
</li>
<li><p>styleValue 为设置的样式值</p>
</li>
</ol>
<h1 id="innerHTML"><a href="#innerHTML" class="headerlink" title="innerHTML"></a>innerHTML</h1><h2 id="语法-3"><a href="#语法-3" class="headerlink" title="语法"></a>语法</h2><blockquote>
<p>ele.innerHTML</p>
</blockquote>
<h3 id="功能-3"><a href="#功能-3" class="headerlink" title="功能"></a>功能</h3><p>返回 ele 元素开始和结束标签之间的 HTML</p>
<h2 id="语法-4"><a href="#语法-4" class="headerlink" title="语法"></a>语法</h2><blockquote>
<p>ele.innerHTML=”html”</p>
</blockquote>
<h3 id="功能-4"><a href="#功能-4" class="headerlink" title="功能"></a>功能</h3><p>设置 ele 元素开始和结束标签之间的 HTML 内容为 html</p>
<h1 id="className"><a href="#className" class="headerlink" title="className"></a>className</h1><h2 id="语法-5"><a href="#语法-5" class="headerlink" title="语法"></a>语法</h2><blockquote>
<p>ele.className</p>
</blockquote>
<h3 id="功能-5"><a href="#功能-5" class="headerlink" title="功能"></a>功能</h3><p>返回 ele 元素的 class 属性</p>
<h2 id="语法-6"><a href="#语法-6" class="headerlink" title="语法"></a>语法</h2><blockquote>
<p>ele.className=”cls”</p>
</blockquote>
<h3 id="功能-6"><a href="#功能-6" class="headerlink" title="功能"></a>功能</h3><p>设置 ele 元素的 class 属性为 cls</p>
<p>动态添加 class 替换为元素本身的 class</p>
<h1 id="获取属性"><a href="#获取属性" class="headerlink" title="获取属性"></a>获取属性</h1><h2 id="语法-7"><a href="#语法-7" class="headerlink" title="语法"></a>语法</h2><blockquote>
<p>ele.getAttribute(“attribute”);</p>
</blockquote>
<h2 id="功能-7"><a href="#功能-7" class="headerlink" title="功能"></a>功能</h2><p>获取 ele 元素的 attribute 属性</p>
<h2 id="说明："><a href="#说明：" class="headerlink" title="说明："></a>说明：</h2><ol>
<li><p>ele 是要操作的 DOM 对象</p>
</li>
<li><p>attribute 是要获取的 HTML 属性（如：id、type）</p>
</li>
<li><p>获取标签属性语法：DOM 对象.属性，如p.id</p>
</li>
</ol>
<h1 id="设置属性"><a href="#设置属性" class="headerlink" title="设置属性"></a>设置属性</h1><h2 id="语法-8"><a href="#语法-8" class="headerlink" title="语法"></a>语法</h2><blockquote>
<p>ele.setAttribute(“attribute”, value);</p>
</blockquote>
<h2 id="功能-8"><a href="#功能-8" class="headerlink" title="功能"></a>功能</h2><p>在 ele 元素的 attribute 属性设置属性值</p>
<h2 id="说明：-1"><a href="#说明：-1" class="headerlink" title="说明："></a>说明：</h2><ol>
<li><p>ele 是要操作的 DOM 对象</p>
</li>
<li><p>attribute 是要获取的 HTML 属性（如：id、type）</p>
</li>
<li><p>value 为设置的 attribute 属性的值</p>
</li>
<li><p>如果 value 是字符串，需加引号</p>
</li>
</ol>
<h1 id="删除属性"><a href="#删除属性" class="headerlink" title="删除属性"></a>删除属性</h1><h2 id="语法-9"><a href="#语法-9" class="headerlink" title="语法"></a>语法</h2><blockquote>
<p>ele.removeAttribute(“attribute”)</p>
</blockquote>
<h2 id="功能-9"><a href="#功能-9" class="headerlink" title="功能"></a>功能</h2><p>删除 ele 上的 attribute 属性</p>
<h2 id="说明：-2"><a href="#说明：-2" class="headerlink" title="说明："></a>说明：</h2><ol>
<li><p>ele 是要操作的 DOM 对象</p>
</li>
<li><p>attribute 是要删除的属性名称</p>
</li>
</ol>

      
    </div>
    <footer class="article-footer">
      <a data-url="http://yoursite.com/2019/08/24/JavaScript基础知识点-初识DOM/" data-id="ck4r400qt0069l0w0dptvlxk5" class="article-share-link">Share</a>
      
      
  <ul class="article-tag-list"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/JavaScript/">JavaScript</a></li></ul>

    </footer>
  </div>
  
</article>


  


  <nav id="page-nav">
    
    <a class="extend prev" rel="prev" href="/page/4/">&laquo; Prev</a><a class="page-number" href="/">1</a><span class="space">&hellip;</span><a class="page-number" href="/page/3/">3</a><a class="page-number" href="/page/4/">4</a><span class="page-number current">5</span><a class="page-number" href="/page/6/">6</a><a class="page-number" href="/page/7/">7</a><span class="space">&hellip;</span><a class="page-number" href="/page/12/">12</a><a class="extend next" rel="next" href="/page/6/">Next &raquo;</a>
  </nav>

</section>
        
          <aside id="sidebar">
  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Categories</h3>
    <div class="widget">
      <ul class="category-list"><li class="category-list-item"><a class="category-list-link" href="/categories/Ajax/">Ajax</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS/">CSS</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/CSS3/">CSS3</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Dart/">Dart</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Flutter/">Flutter</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Git/">Git</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/HTML/">HTML</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/HTML5/">HTML5</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/JSON/">JSON</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Java/">Java</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/JavaScript/">JavaScript</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/QT/">QT</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/React/">React</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/Sass/">Sass</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/TheKnowledgeOf/">TheKnowledgeOf</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/TypeScript/">TypeScript</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/bootstrap/">bootstrap</a></li><li class="category-list-item"><a class="category-list-link" href="/categories/jQuery/">jQuery</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tags</h3>
    <div class="widget">
      <ul class="tag-list"><li class="tag-list-item"><a class="tag-list-link" href="/tags/Ajax/">Ajax</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS/">CSS</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/CSS3/">CSS3</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Dart/">Dart</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Flutter/">Flutter</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Git/">Git</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTML/">HTML</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/HTML5/">HTML5</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JSON/">JSON</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Java/">Java</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/JavaScript/">JavaScript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Javascript/">Javascript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/QT/">QT</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/React/">React</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/Sass/">Sass</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/TheKnowledgeOf/">TheKnowledgeOf</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/TypeScript/">TypeScript</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/bootstrap/">bootstrap</a></li><li class="tag-list-item"><a class="tag-list-link" href="/tags/jQuery/">jQuery</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Tag Cloud</h3>
    <div class="widget tagcloud">
      <a href="/tags/Ajax/" style="font-size: 12.22px;">Ajax</a> <a href="/tags/CSS/" style="font-size: 18.89px;">CSS</a> <a href="/tags/CSS3/" style="font-size: 17.78px;">CSS3</a> <a href="/tags/Dart/" style="font-size: 14.44px;">Dart</a> <a href="/tags/Flutter/" style="font-size: 16.67px;">Flutter</a> <a href="/tags/Git/" style="font-size: 12.22px;">Git</a> <a href="/tags/HTML/" style="font-size: 14.44px;">HTML</a> <a href="/tags/HTML5/" style="font-size: 12.22px;">HTML5</a> <a href="/tags/JSON/" style="font-size: 10px;">JSON</a> <a href="/tags/Java/" style="font-size: 11.11px;">Java</a> <a href="/tags/JavaScript/" style="font-size: 20px;">JavaScript</a> <a href="/tags/Javascript/" style="font-size: 10px;">Javascript</a> <a href="/tags/QT/" style="font-size: 12.22px;">QT</a> <a href="/tags/React/" style="font-size: 15.56px;">React</a> <a href="/tags/Sass/" style="font-size: 11.11px;">Sass</a> <a href="/tags/TheKnowledgeOf/" style="font-size: 11.11px;">TheKnowledgeOf</a> <a href="/tags/TypeScript/" style="font-size: 10px;">TypeScript</a> <a href="/tags/bootstrap/" style="font-size: 11.11px;">bootstrap</a> <a href="/tags/jQuery/" style="font-size: 13.33px;">jQuery</a>
    </div>
  </div>

  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Archives</h3>
    <div class="widget">
      <ul class="archive-list"><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/12/">December 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/11/">November 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/10/">October 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/09/">September 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/08/">August 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/07/">July 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/06/">June 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/05/">May 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/04/">April 2019</a></li><li class="archive-list-item"><a class="archive-list-link" href="/archives/2019/03/">March 2019</a></li></ul>
    </div>
  </div>


  
    
  <div class="widget-wrap">
    <h3 class="widget-title">Recent Posts</h3>
    <div class="widget">
      <ul>
        
          <li>
            <a href="/2019/12/29/Flutter-MaterialApp常用属性介绍/">Flutter-MaterialApp常用属性介绍</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-ListView/">Flutter-ListView</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-AppBar/">Flutter-AppBar</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-TabBar/">Flutter-TabBar</a>
          </li>
        
          <li>
            <a href="/2019/12/29/Flutter-按钮/">Flutter-按钮</a>
          </li>
        
      </ul>
    </div>
  </div>

  
</aside>
        
      </div>
      <footer id="footer">
  
  <div class="outer">
    <div id="footer-info" class="inner">
      &copy; 2019 John Doe<br>
      Powered by <a href="http://hexo.io/" target="_blank">Hexo</a>
    </div>
  </div>
</footer>
    </div>
    <nav id="mobile-nav">
  
    <a href="/" class="mobile-nav-link">Home</a>
  
    <a href="/archives" class="mobile-nav-link">Archives</a>
  
</nav>
    

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>


  <link rel="stylesheet" href="/fancybox/jquery.fancybox.css">
  <script src="/fancybox/jquery.fancybox.pack.js"></script>


<script src="/js/script.js"></script>



  </div>
</body>
</html>